<rich:modalPanel
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:s="http://jboss.com/products/seam/taglib"
   	  xmlns:rich="http://richfaces.org/rich"
 	  xmlns:a4j="http://richfaces.org/a4j"
 	  width="700"
 	  height="250"
 	  autosized="true"
      id="kiwirdfaAboutPanel">
        <f:facet name="header">
            <h:panelGroup>
                <h:outputText value="RDFa Create Component"></h:outputText>
            </h:panelGroup>
        </f:facet>
        
        <p style="margin-top: 20px; margin-left: 10px; margin-right: 10px;" class="help">
        	Here you can embed a page that is related to the current page. 
        </p>
        
       	<a4j:region renderRegionOnly="true">
       	    
       	    <h:form id="kiwirdfaAboutForm">
       	    	<rich:messages styleClass="message"/>
       	    	<h:panelGrid columns="2" rowClasses="prop" columnClasses="name,value">
       	    	
       	    		<h:outputLabel for="rdfaComponentRelation">Relation</h:outputLabel>
		            
		            <h:selectOneMenu value="#{kiwirdfaAction.selectedComponentRelation}" id="rdfaComponentRelation">
						<s:selectItems value="#{kiwirdfaAction.possibleComponentRelations}" var="item" label="#{item.label}" itemValue="#{item.value}" noSelectionLabel="None"/>
					</h:selectOneMenu>
					
					<h:outputText>Title</h:outputText>
					<s:div id="kiwirdfaAbout">
						<s:div rendered="#{kiwirdfaAction.componentResource == null}">
							<h:inputText id="kiwirdfaAboutTitle" size="50" value="#{kiwirdfaAction.componentTitle}"></h:inputText>
							<rich:suggestionbox id="kiwirdfaAboutTitleSuggest" for="kiwirdfaAboutTitle" tokens=",[]"
                        		suggestionAction="#{kiwirdfaAction.titlesAutocomplete}" 
                        		var="result"
                        		minChars="2"
                        		shadowOpacity="4"
                        		border="1"
                        		height="300"
                        		width="600"
                        		shadowDepth="3"
                        		cellpadding="2"
                        		nothingLabel="No content items found" 
                        		columnClasses="center"
                        		usingSuggestObjects="true">
                        
                        		<h:column>
                            		<h:outputText value="#{result[0]}" /> (<h:outputText value="#{result[1]}"/>)
                        		</h:column>
                        		
                        		<a4j:support event="onselect" action="#{kiwirdfaAction.setSuggestedComponent(result[2])}" reRender="kiwirdfaAbout">
         						</a4j:support>
                        		
                			</rich:suggestionbox>
							
						</s:div>
						<s:div rendered="#{kiwirdfaAction.componentResource != null}">
							<a4j:commandButton title="#{kiwirdfaAction.componentResource.uri}" reRender="kiwirdfaAbout" action="#{kiwirdfaAction.changeComponent}" value="#{kiwirdfaAction.componentResourceTitle} (change)"/>
						</s:div>
					</s:div>
		            
		        </h:panelGrid>
		        
		        
		
		        <div class="actionButtons center">
		            <a4j:commandButton value="Create/Update" id="btnCreateRdfaAbout" 
		            	action="#{kiwirdfaAction.createOrUpdateComponent}"
		            	data="#{kiwirdfaAction.componentJS}"
		            	oncomplete="kiwirdfaJSLib.onCreateOrUpdateAbout(data)" />
		            	
		            <a4j:commandButton value="Delete" id="btnDeleteRdfaAbout" 
		            	action="#{kiwirdfaAction.deleteComponent}"
		            	oncomplete="kiwirdfaJSLib.onDeleteAbout()" />
		            	
		            <a4j:commandButton value="Cancel" id="btnKiwirdfaCancelAbout"
		            	action="#{kiwirdfaAction.cancelComponent}" 
		            	oncomplete="kiwirdfaJSLib.onCancelAbout()" />
		            	
		            <a4j:jsFunction name="kiwirdfaSetAbout" reRender="kiwirdfaAboutForm">
		        		<a4j:actionparam name="Param1" assignTo="#{kiwirdfaAction.componentJS}"/>
		        	</a4j:jsFunction>
		        
		        	<!--  <a4j:jsFunction name="onKiWiRDFaCreateOrUpdate"
		            	data="#{kiwirdfaAction.property}" 
	                	oncomplete="kiwirdfaJSLib.onCreateOrUpdate(data)" /> -->
	                	
		        </div>
			</h:form>
		</a4j:region>

</rich:modalPanel>